<template>
    <div>
        <el-tabs @tab-click="handleClick" v-model="activeName" class="p15">
            <el-tab-pane v-for="(tab, index) in tabData" :label="tab.label" :name="tab.name" :key="index">
            </el-tab-pane>
        </el-tabs>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                tabData: [{
                        label: '客户信息',
                        name: 'index'
                    },
                    {
                        label: '终端用户产品',
                        name: 'terminal_products'
                    },
                    {
                        label: '卡号列表',
                        name: 'sim_cards'
                    },
                    {
                        label: '流量池',
                        name: 'traffic_pools'
                    },
                    {
                        label: '服务周期管理',
                        name: 'agent_service_circle_manage'
                    },
                    {
                        label: '财务信息',
                        name: 'agent_order_statistics'
                    },
                    {
                        label: '流量统计',
                        name: 'agent_flow_statistics'
                    }
                ],
                activeName: 'index'
            }
        },
        created() {
            this.activeName = this.$route.name
            if(this.$route.fullPath.includes('terminal_products')) {
                this.activeName = 'terminal_products'
            }
            if(this.$route.fullPath.includes('agent_order_statistics')) {
                this.activeName = 'agent_order_statistics'
            }
            if(this.$route.fullPath.includes('traffic_pools')) {
                this.activeName = 'traffic_pools'
            }
            if(this.$route.fullPath.includes('agent_flow_statistics')) {
                this.activeName = 'agent_flow_statistics'
            }
            
        },
        methods: {
            handleClick(tab) {
                var path = '/agent_increase/' + this.$route.params.id9+ '/' + tab.name
                if (tab.name === 'index') {
                    path = '/agent_increase/' + this.$route.params.id9;
                }
                this.$router.push({
                    path: path
                })
            }
        },
        watch: {
            $route: {
                handler: function(to) {
                    if (to.name == 'order_incomes') {
                        this.activeName = 'agent_order_statistics'
                    }
                    this.tabData.forEach((tab) => {
                        if (to.name.includes(tab.name)) {
                            if (to.name.includes('/')) {
                                this.activeName = to.name.split('/')[0]
                            } else {
                                this.activeName = to.name
                            }
                        }
                        
                    });
                },
                // 深度观察监听
                deep: true
            }
        }
    }
</script>

<style scoped>
    
</style>